<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
/* 布局1 */
.flex-container1{ display:flex; width:800px; height:230px; background-color: #ccc; margin-bottom: 20px;}
.flex-container1 .flex-item{ background-color:blue; width: 100px; margin: 2px;}

/* 布局2 */
.flex-container2{ display:flex; width:800px; height:230px; background-color: #ccc; margin-bottom: 20px; flex-direction: column;}
.flex-container2 .flex-item{ background-color:blue; width: 100px; margin: 2px;}

/* 布局3 */
.flex-container3{ display:flex; width:800px; height:230px; background-color: #ccc; margin-bottom: 20px; justify-content: space-between;}
.flex-container3 .flex-item{ background-color:blue; width: 100px; margin: 2px;}

/* 布局4 */
.flex-container4{ display:flex; width:800px; height:230px; background-color: #ccc; margin-bottom: 20px; align-items: center;}
.flex-container4 .flex-item{ background-color:blue; width: 100px; margin: 2px;}

/* 布局5-item值 */
.flex-container5{ display:flex; width:800px; height:230px; background-color: #ccc; margin-bottom: 20px;}
.flex-container5 .flex-item{ background-color:blue; width: 100px; margin: 2px; flex-grow: 1;}
.flex-container5 .flex-item.flex-item2{ flex-grow: 2;}

/* 布局6-多行 */
.flex-container6{ display:flex; width:500px; height:230px; background-color: #ccc; margin-bottom: 20px; flex-wrap: wrap;}
.flex-container6 .flex-item{ background-color:blue; width: 100px; margin: 2px;}
</style>
</head>
<body>
https://www.cnblogs.com/myzhibie/p/4318904.html

<!-- 布局1-flex -->
<div class="flex-container1">
   <div class="flex-item ">1</div>
   <div class="flex-item ">2</div>
   <div class="flex-item ">3</div>
   <div class="flex-item ">4</div>
</div>

<!-- 布局2-flex-direction-用来定义主轴侧轴方向的 -->
<div class="flex-container2">
   <div class="flex-item ">1-row(左右排)</div>
   <div class="flex-item ">2-row-reverse(左右排-反序)</div>
   <div class="flex-item ">3-column(上下排)</div>
   <div class="flex-item ">4-column-reverse(上下排-反序)</div>
</div>

<!-- 布局3-justify-content-用来表示可伸缩项目在主轴方向上的对齐方式 -->
<div class="flex-container3">
   <div class="flex-item ">1-space-between(多余空间,子项之间的间隔平分,不含左右侧)</div>
   <div class="flex-item ">2-space-evenly(多余空间,子项之间的间隔平分,含左右侧)</div>
   <div class="flex-item ">3-flex-start(表示相对于主轴起点对齐)</div>
   <div class="flex-item ">4-flex-end(表示相对于主轴终点对齐)</div>
</div>

<!-- 布局4-定义 flex 项如何沿当前行在交叉轴上排布的默认行为。可以将其视为交叉轴（垂直于主轴）上的对齐方式。 -->
<div class="flex-container4">
    <div class="flex-item ">1-flex-start(多行在容器的开始位置排布)</div>
    <div class="flex-item ">
        <div>21</div>
        <div>22</div>
    </div>
    <div class="flex-item ">2-flex-end(多行在容器的结束位置排布)</div>
    <div class="flex-item ">4-center(多行在容器的总结位置排布)</div>
</div>

<!-- 布局5-flex -->
<div class="flex-container5">
   <div class="flex-item flex-item1">1</div>
   <div class="flex-item flex-item2">2</div>
   <div class="flex-item flex-item3">3</div>
   <div class="flex-item flex-item4">4</div>
</div>

<!-- 布局6-多行 -->
<div class="flex-container6">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
   <div class="flex-item">4</div>
   <div class="flex-item">5</div>
   <div class="flex-item">6</div>
</div>

</body>
</html>